// 全局样式优化

// 重置默认样式
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #f0f2f5;
}

#app {
  height: 100%;
}

// 滚动条样式优化
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  border-radius: 4px;
  
  &:hover {
    background-color: rgba(144, 147, 153, 0.7);
  }
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

// Element Plus 样式覆盖
.el-button {
  border-radius: 4px;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: none;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  
  th {
    background-color: #f5f7fa !important;
  }
}

// 表单样式优化
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
}

// 面包屑样式优化
.el-breadcrumb {
  line-height: inherit;
}

// 标签页样式优化
.el-tabs__item {
  height: 40px;
  line-height: 40px;
}

// 响应式断点
@media (max-width: 768px) {
  .el-header {
    padding: 0 10px;
  }
  
  .app-main {
    padding: 10px;
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  // 隐藏侧边栏默认显示
  .sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar-container.show {
    transform: translateX(0);
  }
  
  // 主体内容全宽显示
  .layout-container .el-container {
    margin-left: 0 !important;
  }
  
  // 顶部导航栏调整
  .navbar {
    padding: 0 10px;
    
    .navbar-right {
      .el-button-group {
        display: none;
      }
    }
  }
  
  // 标签页调整
  .tags-view-container {
    height: auto;
    white-space: nowrap;
    overflow-x: auto;
    
    .tags-view-wrapper {
      .tags-view-item {
        font-size: 12px;
        padding: 0 6px;
        margin: 4px 2px;
      }
    }
  }
  
  // 主要内容区域调整
  .app-main {
    padding: 10px;
    height: calc(100vh - #{$nav-height} - #{$nav_menu_height} - 20px);
  }
  
  // 表单元素调整
  .el-form-item {
    display: flex;
    flex-direction: column;
    
    .el-form-item__label {
      margin-bottom: 5px;
    }
    
    .el-form-item__content {
      width: 100%;
    }
  }
  
  // 卡片组件调整
  .el-card {
    margin-bottom: 10px;
  }
  
  // 表格组件调整
  .el-table {
    font-size: 12px;
    
    th, td {
      padding: 5px 0;
    }
  }
  
  // 按钮调整
  .el-button {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  // 下拉菜单调整
  .el-dropdown {
    font-size: 12px;
  }
}

// 调试模式样式
.debug-mode {
  .layout-container {
    .sidebar-container {
      width: 180px !important;
      min-width: 180px;
    }
    
    .main-container {
      .app-main {
        padding: 15px;
        min-width: 280px;
        
        .el-scrollbar {
          .el-scrollbar__view {
            min-width: 250px;
          }
        }
      }
      
      .navbar {
        padding: 0 15px;
        
        .navbar-right {
          .el-button-group {
            .el-button {
              margin-left: 3px;
              padding: 5px;
            }
          }
          
          .user-dropdown {
            font-size: 13px;
          }
        }
      }
      
      .tags-view-container {
        .tags-view-wrapper {
          .tags-view-item {
            padding: 0 6px;
            font-size: 11px;
            margin-left: 3px;
            
            &:first-of-type {
              margin-left: 10px;
            }
            
            &:last-of-type {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}

// 超小屏幕调试模式
@media screen and (max-width: 800px) {
  .debug-mode {
    .layout-container {
      .sidebar-container {
        width: 160px !important;
        min-width: 160px;
      }
      
      .main-container {
        .app-main {
          padding: 10px;
          min-width: 200px;
        }
        
        .navbar {
          padding: 0 10px;
          
          .navbar-right {
            .el-button-group {
              display: none;
            }
            
            .user-dropdown {
              font-size: 12px;
            }
          }
        }
        
        .tags-view-container {
          display: none;
        }
      }
    }
  }
}